<template>
    <scroll-view
        class="scroll"
        scroll-with-animation
        :scroll-into-view="intoIndex"
        :scroll-x="true"
        :show-scrollbar="false">
        <view class="tabs">
            <view
                class="tab-item"
                :class="{ active: tabIndex == item.id }"
                v-for="(item, index) in treeData"
                @click="treeClickEvent(item, index)"
                :key="index"
                :id="'text' + item.id">
                <text class="tab-item-text">{{ item.name }}</text>
            </view>
        </view>
    </scroll-view>
</template>

<script>
export default {
    name: "navTreeX",
    components: {},
    props: {
        // 树形控件数据
        treeData: {
            type: Array,
            default() {
                return () => []
            },
        },
        activeId: {
            type: Number,
            default: -1,
        },
    },
    watch: {
        activeId(id) {
            this.tabIndex = id
            this.$nextTick(() => {
                let objIndex = 0
                let objId = 0
                for (var i = 0; i < this.treeData.length; i++) {
                    let obj = this.treeData[i]
                    if (obj.id == id) {
                        if (i > 0) {
                            objIndex = i - 1
                        } else {
                            objIndex = i
                        }
                        break
                    }
                }
                for (var i = 0; i < this.treeData.length; i++) {
                    let obj = this.treeData[i]
                    if (i == objIndex) {
                        objId = obj.id
                        break
                    }
                }
                this.intoIndex = "text" + objId
            })
            this.$forceUpdate()
        },
    },
    data() {
        return {
            tabIndex: 0,
            intoIndex: "",
        }
    },
    mounted() {},
    methods: {
        treeClickEvent(item, index) {
            this.tabIndex = item.id
            // this.$nextTick(()=>{
            // 	this.intoIndex = 'text'+this.tabIndex
            // })
            this.$emit("treeClickEvent", item, this.treeData)
        },
    },
}
</script>
<style lang="scss">
.scroll {
    width: 100%;
    padding: 0 5rpx;
}
.tabs {
    display: flex;
    padding: 0 $app-page-padding;
    background: $color-white;
    white-space: nowrap;
    .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        // flex: 1;
        color: grey;
        font-size: $app-tab-text-size;
        font-weight: 500;
        height: 100%;
        box-sizing: border-box;
        margin-right: 10rpx;

        .tab-item-text {
            display: flex;
            flex: 1;
            height: 60rpx;
            align-items: center;
            justify-content: center;
            padding: 12rpx 16rpx;
            font-weight: 700;
            font-size: $font-size-26;
            border-radius: 31rpx;
            white-space: nowrap;
        }

        &.active {
            .tab-item-text {
                color: $color-white;
                background: $app-color-main;
            }
        }
    }
}
</style>
